<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
    <head>        
        <!-- META SECTION -->
        <title>注册用户管理</title>            
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <!-- END META SECTION -->
        
        <!-- CSS INCLUDE -->        
        <link rel="stylesheet" href="${ctx}/rs/css/bootstrap-table.css" />
        <link rel="stylesheet" href="${ctx}/rs/css/main.css" />
        <link id="theme" rel="stylesheet" href="${ctx}/rs/joli/css/theme-default.css" />
        <!-- EOF CSS INCLUDE -->                                    
    </head>
    <body>
        <!-- START PAGE CONTAINER -->
        <div class="page-container">
        	<!-- 引入左菜单部分 -->
            <jsp:include page="../joli/menu.jsp"></jsp:include>
            
            <!-- START PAGE CONTENT -->
            <div class="page-content">
                
                <jsp:include page="../joli/top.jsp"></jsp:include>
                
                <!-- START BREADCRUMB -->
                <ul class="breadcrumb">
                    <li><a href="#">首页</a></li>                    
                    <li class="active">欢迎</li>
                </ul>
                <!-- END BREADCRUMB -->   
                
                
                <!-- PAGE CONTENT WRAPPER -->
                <div class="page-content-wrap">
                	<div class="row">
                		<div class="col-xs-12">
                			<div id="toolbar">
							    <label class="regnum">注册用户数：<b id="userNumber" class="col_red">0</b>&nbsp;个</label>  
							    <div class="fr pb10">
							                     手机号码：
					    		   <input id="phone" class="srt-put1 mr10 widput1"/>
					    		          昵称/姓名：
					    		   <input id="name" class="srt-put1 mr10 widput1"/>
					    	                     起止时间：
					    	       <input type="text" onclick="WdatePicker()" class="srt-put1  Wdate2" id="startDate" name="startDate"   
					                onFocus="var endDate=$dp.$('endDate');WdatePicker({onpicked:function(){endDate.focus();},dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endDate\')}'})" /> 
					                                             至
					               <input type="text" onclick="WdatePicker()" class="srt-put1  Wdate2" id="endDate" name="endDate"  
					                onFocus="WdatePicker({minDate:'#F{$dp.$D(\'startDate\')}',dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
								   <button class="btn btn-primary btn-sm srt-btn active" onclick="refresh()">搜索</button>
							    </div>
							</div>
							<table id="table" cellpadding="0" cellspacing="0" data-toggle="table" data-toolbar="#toolbar"
								data-url="${ctx}/user/register/page.htm"
								data-cache="false"
								data-pagination="true" 
								data-side-pagination="server"
								data-page-list="[10, 20, 50, 100]"
								data-page-size="20" 
								data-query-params="queryParams">
								<thead>
									<tr class="tab-th">
										<th data-field="id">编号</th>
										<th data-field="phone">手机号码</th>
										<th data-field="nickName">昵称</th>
										<th data-field="name">姓名</th>
										<th data-field="sex" data-formatter="sexFormatter">性别</th>
										<th data-field="birthday" data-formatter="birthdayFormatter">生日</th>
										<th class="col-md-3" data-field="address">地址</th>
										<th data-field="createTime" data-formatter="timeFormatter">注册时间</th>
									</tr>
								</thead>
							</table>
                		</div>
             		</div>
            	</div>
		</div>
	</body>
	
	<!-- 引入所有joli的脚本 -->
	<jsp:include page="../joli/scripts.jsp"></jsp:include>
	<!-- 引入页面需要的脚本 -->
	<script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table-zh-CN.js"></script>
	<script src="${ctx}/rs/js/jquery.formatDate.js"></script>
	<script src="${ctx}/rs/js/my97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${ctx}/rs/js/session-out-error.js"></script>
	
	<script type="text/javascript">
		activeMenu($("#menu_sys_0"));
		 var $table = $('#table');
		    $table.bootstrapTable({
	         height: getHeight()
	     });
		    
	     //获取分辨率高度
		    function getHeight() {
		        return window.screen.height - 308;
		    }
		    
		    $(window).resize(function () {
		     	$table.bootstrapTable('resetView',{height: getHeight()});
		     });
		    
		    $(".x-navigation-minimize").bind("click",function(){
		    	$table.bootstrapTable('resetView',{height: getHeight()});
		    })
		    $table.on('load-success.bs.table', function (e, name, args) {
		//       console.log(eval(name).total);
		      $("#userNumber").text(eval(name).total);
		     });
		    
		    //初始化刷新
		    function refresh(){
		    	var phone = $("#phone").val();
				var name = $("#name").val();
				var startDate = $("#startDate").val();
				var endDate = $("#endDate").val();
				var pageSize = $table.bootstrapTable('getOptions').pageSize;
		    	$table.bootstrapTable('refresh', {
		    		silent: true,
		    		cache : false,
	             url: '${ctx}/user/register/page.htm',
	             query: {
	             	startDate:startDate,
	 				endDate:endDate,
	 				phone :phone,
	 				name :name,
	 				pageIndex : 0,
	 				pageSize : pageSize
	 			}
	         });
		    }
		    
			function queryParams(params) {
				var phone = $("#phone").val();
				var name = $("#name").val();
				var startDate = $("#startDate").val();
				var endDate = $("#endDate").val();
				return {
					startDate:startDate,
					endDate:endDate,
					phone :phone,
					name :name,
					pageIndex : params.offset,
					pageSize : params.limit
				};
			}
			
			var genders = [{ id: 0, text: '男' }, { id: 1, text: '女'}, { id:-1 ,text :'不详'}];
	     function sexFormatter(value, row, index){
	     	for (var i = 0, l = genders.length; i < l; i++) {
	     		var gender = genders[i];
	             if (gender.id == value) 
	              return gender.text;
	         }
				 return "--";
			}
	     
	     function birthdayFormatter(value, row, index){
				 if(value){
					 return $.formatDate("yyyy-MM-dd", new Date(value));
				 }
				 return "--";
			}
	     
			function timeFormatter(value, row, index){
				 if(value){
					 return $.formatDate("yyyy-MM-dd HH:mm:ss", new Date(value));
				 }
				 return "--";
			}
	</script>
</html>